<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度地图定位</title>
    <style>
        html,body,#container{
            height:100%;
        }
        .info{
            width:26rem;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=IH8LedUpMbVMP7MGgfqqPsjT4eIXwQim"></script>
    <script type="text/javascript">
onload = function(){
  var map = new BMap.Map("container");
  var point = new BMap.Point(116.331398,39.897445);
  map.centerAndZoom(point,12);
  map.enableScrollWheelZoom(true);
  if(navigator.geolocation)
  {
     navigator.geolocation.getCurrentPosition(function(data){
     console.log(data);
     var jd = data.coords.longitude;
     var wd = data.coords.latitude;
     var pt = new BMap.Point(jd,wd);
     var mk = new BMap.Marker(pt);
     map.addOverlay(mk);
     map.panTo(pt);
     /*var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
     });
     local.search("腾讯科技");*/
  },function(error){
     console.log(error);
    })
  }
}
</script>
</head>
<body>
<div id='container'></div>
<div class="info">
    <p >高得辅助定位</p>
</div>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
      function getLocation(){
      if (navigator.geolocation) {
        <!-- 前端页面访问设备地理位置 -->
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
            console.error("浏览器不支持地理定位");
      }
    }

    function showPosition(position){
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      accuracy = position.coords.accuracy;
      locationInfo.innerHTML="Latitude: " + latitude + "<br />Longitude: " + longitude;
    }
  </script>
</body>
</html>